<template>
    <div class="chart-box">
        <div ref="chart"></div>
        <div class="center-text">核心制度</div>
    </div>
</template>

<script>

import * as echarts from 'echarts'
export default {
    name: "MechanismTrial",
    data() {
        return {
            options: {
                series: [
                    {
                        title: {
                            text: '核心制度',
                            left: 'center',
                            top: 'middle',
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        type: 'pie',
                        radius: ['50%', '80%'],
                        padAngle: 10,
                        itemStyle: {
                            borderRadius: 10
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 5, name: '家庭保护专项制度' },
                            { value: 5, name: '案件审理专项制度' },
                            { value: 5, name: '服务规范专项制度' },
                        ]
                    }
                ]
            }
        }
    },

    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    flex: 1;
    height: 180px;
    position: relative;

    &>div:first-child {
        width: 100%;
        height: 100%;
    }

    .center-text {
        position: absolute;
        top: 28%;
        left: 41%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0690B3;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        color: #fff;
    }
}
</style>